<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品评价</title>
  <link rel="stylesheet" href="css/comment.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    /* 整体评分区域样式 */
    .rating {
      display: flex;
      align-items: center;
      flex-direction: row; /* 星星从左到右排列 */
    }

    .rating input[type="radio"] {
      display: none;
    }

    .rating label {
      font-size: 24px;
      color: #ccc;
      cursor: pointer;
      margin-right: 5px; /* 给每颗星星添加右侧间距 */
    }



    /* 当某颗radio被选中时，选中的星星及其左边的星星为金色，右边的星星为灰色 */
    .rating input[type="radio"]:checked ~ label {
      color: gold;
    }
    .rating input[type="radio"]:checked + label ~ label {
      color: #ccc;
    }


    textarea {
      width: 100%;
      height: 150px;
      resize: none;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .submit-button {
      background-color: #007BFF;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>

<body>
<header>
  <div class="logo">
    <img src="img/logo.png" alt="购物网站标志">
  </div>
  <div class="user-info">
    <a href="mine.html">个人主页</a> | <a href="javascript:logout()" class="logout">退出登录</a>
  </div>
</header>

<nav>
  <ul>
    <li><a href="home.html">首页</a></li>
    <li><a href="shoppingcart.html">购物车</a></li>
    <li>
      <a>我的订单</a>
      <ul class="dropdown">
        <li><a href="order.html#all">历史订单</a></li>
        <li><a href="order.html#unpaid">待支付</a></li>
        <li><a href="order.html#paid">已支付</a></li>
        <li><a href="order.html#uncommented">待评价</a></li>
        <li><a href="order.html#commented">已评价</a></li>
      </ul>
    </li>
    <li>
      <a>设置</a>
      <ul class="dropdown">
        <li><a href="setting.html#profile">个人信息</a></li>
        <li><a href="setting.html#change-password">修改密码</a></li>
      </ul>
    </li>
  </ul>
</nav>

<main>
  <!-- 商品评价板块 -->
  <section id="comment-section">
    <h2 id="product-title">商品信息</h2>
    <table class="order-table">
      <thead>
      <tr>
        <th>订单号</th>
        <th>产品名称</th>
        <th>订单金额</th>
        <th>订单时间</th>
      </tr>
      </thead>
      <tbody id="product-info">
      <!-- 商品数据将在这里动态插入 -->
      </tbody>
    </table>
    <h2>评价内容</h2>
    <div class="rating">
      <input type="radio" id="star1" name="rating" value="1" />
      <label for="star1">★</label>
      <input type="radio" id="star2" name="rating" value="2" />
      <label for="star2">★</label>
      <input type="radio" id="star3" name="rating" value="3" />
      <label for="star3">★</label>
      <input type="radio" id="star4" name="rating" value="4" />
      <label for="star4">★</label>
      <input type="radio" id="star5" name="rating" value="5" />
      <label for="star5">★</label>
    </div>
    <textarea id="comment-textarea" placeholder="请输入您的评价内容"></textarea>
    <button class="submit-button" onclick="submitComment()">提交评价</button>
  </section>
</main>

<footer>
  <p>&copy; 购物网站。</p>
</footer>

<script>
  // 获取URL中的订单号参数（假设从待评价订单页面跳转过来时携带订单号参数）
  const urlParams = new URLSearchParams(window.location.search);
  const traceNo = urlParams.get('traceNo');
  const pid = urlParams.get('pid');

  $(document).ready(function () {
    // 根据订单号发送AJAX请求获取商品详细信息填充页面
    $.ajax({
      url: `/order/get-order-by-id`, // 后端接口，需根据实际开发调整，用于获取指定订单商品信息
      type: 'GET',
      dataType: 'json',
      data: {
        traceNo: traceNo,
        pid: pid
      },
      success: function (response) {
        if (response.state === 200) {
          const product = response.data;
          let rowHtml = `
                            <tr>
                                <td>${product[0].traceNo}</td>
                                <td>${product[0].name}</td>
                                <td>${product[0].totalPrice}</td>
                                <td>${product[0].createTime}</td>
                            </tr>
                        `;
          $('#product-info').html(rowHtml);
          $('#product-title').text(product[0].name + " 商品评价");
        } else {
          $('#product-info').html('<tr><td colspan="3">加载商品信息失败，请稍后再试。</td></tr>');
        }
      },
      error: function () {
        $('#product-info').html('<tr><td colspan="3">加载商品信息失败，请稍后再试。</td></tr>');
      }
    });
  });

  function submitComment() {
    const rating = $("input[name='rating']:checked").val();
    const comment = $('#comment-textarea').val();
    // 发送AJAX请求提交评价数据到后端（需后端对应接口接收处理）
    $.ajax({
      url: `/comment/add`,
      type: 'POST',
      dataType: 'json',
      data: {
        pid: pid,
        traceNo: traceNo,
        rating: rating,
        content: comment
      },
      success: function (response) {
        if (response.state === 200) {
          alert('评价提交成功');
          location.href = 'order.html#commented'; // 提交成功后回到已评价订单页面
        } else {
          alert('评价提交失败，请稍后再试');
        }
      },
      error: function () {
        alert('评价提交失败，请稍后再试');
      }
    });
  }

  function logout() {
    if (confirm("确认要退出登录？")) {
      $.ajax({
        url: "/user/logout",
        type: "GET",
        success: function (response) {
          if (response.state === 200) {
            alert("退出成功");
            location.href = "home.html";
          } else {
            alert("当前未登录，点击确认回到首页");
            location.href = "home.html";
          }
        },
        error: (err) => {
          alert("抱歉，当前状态异常，请点击确认！");
          location.assign('/home.html');
        }
      });
    }
  }

  function checkLogin() {
    $.ajax({
      url: "/user/get-user",
      type: "get",
      success: function (result) {
        if (result.state == 401) {
          alert("登陆已失效，请重新登陆");
          location.href = "login.html";
        }
      },
      error: function (err) {
        if (err.status == 401) {
          alert("当前用户未登录，你即将回到首页");
          location.href = "home.html";
        }
      }
    })
  }
  checkLogin();

  // 新增的JavaScript代码，用于处理星星评分选择逻辑
  $(function () {
    $('.rating input[type="radio"]').change(function () {
      // 先将所有星星设置为灰色
      $('.rating label').css('color', '#ccc');
      // 获取当前选中的星星
      var selectedIndex = $(this).index('.rating input[type="radio"]');
      // 将选中星星及其左边的星星设置为金色
      for (var i = 0; i <= selectedIndex; i++) {
        $('.rating label').eq(i).css('color', 'gold');
      }
    });
  });
</script>

</body>

</html>